<template>
    <Card style="margin-bottom: 20px;" class="data-card">
        <!-- {{data}}88 -->
        <div slot="title">
            <div class="card-title">
                <Row style="width: 100%;">
                    <i-col :span="7" style="text-align: left;">
                        <Checkbox v-model="data.checked" size="large" @on-change="containerCheckChange">箱号：<span>{{data.containerCode}}</span></Checkbox>
                        <span v-if="data.releaseApplicationStatus > 0" class="order-status">解押申请中</span>
                    </i-col>
                    <i-col :span="5">
                        <p class="flex-class"><img src="../../assets/images/order/matType.png" width="16" style="margin-right: 5px">合同类型：<span>{{ $utils.handleDictData(data.businessType, dictInfo.businessType) }}</span></p>
                    </i-col>
                    <i-col :span="7">
                        <p class="flex-class"><img src="../../assets/images/order/weight.png" width="16" style="margin-right: 5px">重量(KGS)：<span>{{ data.weightTotal }}(已解押：{{ data.hadWeight ? data.hadWeight : 0 }}/解押中：{{ data.weight ? data.weight : 0 }})</span></p>
                    </i-col>
                    <i-col :span="5">
                        <p class="flex-class">件数：<span>{{ data.quantityTotal }}(已解押：{{ data.hadQuantity ? data.hadQuantity : 0 }}/解押中：{{ data.quantity ? data.quantity : 0 }})</span></p>
                    </i-col>
                </Row>
            </div>
            <div class="overdue" :style="{backgroundColor: cargoReleaseStatusColor[data.cargoReleaseStatus]}">
                {{ cargoReleaseStatus[data.cargoReleaseStatus] }}
            </div>
        </div>
        <div class="card-content">
            <Row class="card-word">
                 <i-col span="5">
                    <p>
                        国别品名：<span>{{ data.country }}</span>
                    </p>
                </i-col>
                <i-col span="5">
                    <p>
                        保税性质：<span>{{ data.goodsBondedProperty ? (data.goodsBondedProperty == '0' ? '一般贸易' : '保税') : '' }}</span>
                    </p>
                </i-col>
                <i-col span="5">
                    <p>
                        入库时间：<span>{{ data.inPlanTime ? $utils.dateToDateStr(new Date(data.inPlanTime)) : '' }}</span>
                    </p>
                </i-col>
                <i-col span="7">
                    <p>
                        仓库名称：<span>{{ data.warehouseName }}</span>
                    </p>
                </i-col>
                <i-col span="2" style="text-align: right;">
                    <Dropdown @on-click="drop" transfer>
                        <p class="speedOfProgress">
                            <span style="font-weight: normal;color: #4f68e8;">查看</span><Icon type="ios-arrow-down" />
                        </p>
                        <DropdownMenu slot="list">
                            <DropdownItem name="release">解押申请</DropdownItem>
                            <DropdownItem name="orderInformation">订单信息</DropdownItem>
                        </DropdownMenu>
                    </Dropdown>
                </i-col>
            </Row>

            <Row style="margin-top: 25px; margin-bottom: 20px" class="card-word">
                <i-col span="5">
                    <p>
                        采购合同号：<span>{{ data.purchasingAgreementCode }}</span>
                    </p>
                </i-col>
                <i-col span="5">
                    <p>
                        签订日期：<span>{{ data.contractValidityPeriodStart ? $utils.dateToDateStr(new Date(data.contractValidityPeriodStart)) : '' }}</span>
                    </p>
                </i-col>
                <i-col span="5">
                    <p>
                        合同结束日期：<span>{{ data.contractValidityPeriodEnd ? $utils.dateToDateStr(new Date(data.contractValidityPeriodEnd)) : '' }}</span>
                    </p>
                </i-col>
                <i-col span="9">
                    <p class="speedOfProgress" style="font-weight: normal;text-align: right;color: #4F68E8;" @click="speedOfProgressClick()">
                        {{ speedOfProgressShow ? '收起详情' : '展开详情' }}
                        <Icon v-if="!spinShow" type="ios-arrow-down" :class="arrowClass" />
                        <Icon v-else type="ios-loading" class="demo-spin-icon-load"></Icon>
                    </p>
                </i-col>
            </Row>
            <el-collapse-transition>
                <div v-if="speedOfProgressShow" style="margin-top: 20px">
                    <div v-for="(good, index) in data.goodsList" :key="index" style="margin-bottom: 10px;background-color: rgba(244, 247, 250, 1);padding: 20px 0 20px 30px;">
                        <Row style="padding-bottom: 10px;">
                            <i-col span="6">
                                <Checkbox v-model="good.checked" size="large">货物描述：<span>{{ good.country }}{{ good.matName }}{{ good.cargoSpecification }}</span></Checkbox>
                            </i-col>
                            <i-col span="12">
                                <p>
                                    重量(KGS)：<span>{{ good.weightTotal }}(已解押：{{ good.hadWeight ? good.hadWeight : 0 }}/解押中：{{ good.weight ? good.weight : 0 }})</span>
                                </p>
                            </i-col>
                            <i-col span="4">
                                <p>
                                    件数：<span>{{ good.quantityTotal }}(已解押：{{ good.hadQuantity ? good.hadQuantity : 0 }}/解押中：{{ good.quantity ? good.quantity : 0 }})</span>
                                </p>
                            </i-col>
                        </Row>
                        <Row style="padding-bottom: 10px;">
                            <i-col span="6">
                                <p>
                                    入库时间：<span>{{ good.inPlanTime ? $utils.dateToDateStr(new Date(good.inPlanTime)) : '' }}</span>
                                </p>
                            </i-col>
                            <i-col span="6">
                                <p>
                                    厂号：<span>{{ good.factoryCode }}</span>
                                </p>
                            </i-col>
                            <i-col span="6">
                                <p>
                                    包装规格：<span>{{ good.matSpecification }}</span>
                                </p>
                            </i-col>
                            <i-col span="6">
                                <p>
                                    品类：<span>{{ $utils.handleDictData(good.matType, dictInfo.matType) }}</span>
                                </p>
                            </i-col>
                        </Row>
                        <Row style="padding-bottom: 10px;">
                            <i-col span="6">
                                <p>
                                    失效日期：<span>{{ good.expirationDate ? $utils.dateToDateStr(new Date(good.expirationDate)) : '' }}</span>
                                </p>
                            </i-col>
                            <i-col span="6">
                                <p>
                                    提单号：<span>{{ good.billLadingNum }}</span>
                                </p>
                            </i-col>
                            <i-col span="6">
                                <p>
                                    保税性质：<span>{{ good.goodsBondedProperty ? (good.goodsBondedProperty == '0' ? '一般贸易' : '保税') : '' }}</span>
                                </p>
                            </i-col>
                            <i-col span="6">
                                <p>
                                    仓库名称：<span>{{ good.warehouseName }}</span>
                                </p>
                            </i-col>
                        </Row>
                        <Row>
                            <i-col span="6">
                                <p>
                                    生产日期：<span>{{ good.dateGen ? $utils.dateToDateStr(new Date(good.dateGen)) : '' }}</span>
                                </p>
                            </i-col>
                            <i-col span="6">
                                <p>
                                    保质期：<span>{{ good.validatePeriod }}{{ good.validatePeriod ? '个月' : '' }}</span>
                                </p>
                            </i-col>
                            <i-col span="6">
                                <p>
                                    结算客户：<span>{{ $utils.handleDictData(good.entrustingParty, dictInfo.customerId) }}</span>
                                </p>
                            </i-col>
                        </Row>
                    </div>
                </div>
            </el-collapse-transition>
        </div>
    </Card>
</template>

<script>
import _ from 'lodash';
import ConnectingLineNode from './component/connecting-line-node';
import api from '@/api/order';
export default {
    name: 'dataCard',
    props: {
        data: {
            type: Object,
            default() {
                return {};
            }
        },
        dictInfo: {
            type: Object,
            default() {
                return {};
            }
        }
    },
    components: {
        ConnectingLineNode
    },
    data() {
        return {
            spinShow: false,
            speedOfProgressShow: false,
            arrivalShow: false,
            warehousingShow: false,
            arrowClass: '',
            arrivalArrowClass: '',
            warehousingArrowClass: '',
            statusList: [
                {
                    text: '草稿',
                    value: '0'
                },
                {
                    text: '审批中',
                    value: '1'
                },
                {
                    text: '驳回',
                    value: '2'
                },
                {
                    text: '执行中',
                    value: '3'
                },
                {
                    text: '完成',
                    value: '4'
                },
                {
                    text: '异常完结审批中',
                    value: '5'
                },
                {
                    text: '异常完结',
                    value: '6'
                },
                {
                    text: '已完结',
                    value: '7'
                }
            ],
            cargoReleaseStatus: {
                1: '在途',
                2: '到港',
                3: '在库',
                4: '解押申请',
                5: '拒绝解押',
                6: '解押申请中'
            },
            cargoReleaseStatusColor: {
                1: 'rgb(9,121,80)',
                2: '#FFA500',
                3: '#4579fa',
                4: 'rgb(9,121,80)',
                5: 'rgb(9,121,80)',
                6: 'rgb(9,121,80)'
            }
        };
    },
    methods: {
        async getGoodsList() {
            let body = {
                containerCode: this.data.containerCode,
                orderNum: this.data.orderNum,
                goodsActIds: this.data.goodsActIds
            };
            let { data } = await api.queryContainerGoodsDetailList(body);
            if (data.returnCode === 200) {
                data.returnData.records.forEach(x => {
                    x.checked = false;
                    x.cargoReleaseStatus = this.data.cargoReleaseStatus;
                });
                this.data.goodsList = data.returnData.records;
            } else {
                this.$Message.error(data.returnMsg);
            }
        },
        async speedOfProgressClick() {
            if (!this.speedOfProgressShow) {
                this.spinShow = true;
                await this.getGoodsList();
                this.spinShow = false;
                this.speedOfProgressShow = !this.speedOfProgressShow;
                this.arrowClass = 'top-arrow';
            } else {
                this.arrowClass = 'bottom-arrow';
                this.speedOfProgressShow = !this.speedOfProgressShow;
            }
        },
        arrivalProgressClick() {
            this.arrivalShow = !this.arrivalShow;
            if (this.arrivalShow) {
                this.arrivalArrowClass = 'top-arrow';
            } else {
                this.arrivalArrowClass = 'bottom-arrow';
            }
        },
        warehousingProgressClick() {
            this.warehousingShow = !this.warehousingShow;
            if (this.warehousingShow) {
                this.warehousingArrowClass = 'top-arrow';
            } else {
                this.warehousingArrowClass = 'bottom-arrow';
            }
        },
        getMatTypeName(matTypeStr) {
            if (matTypeStr) {
                let matTypeCodeList = matTypeStr.split(',');
                return  _.uniq(matTypeCodeList).map(x => this.$utils.handleDictData(x, this.dictInfo.matType)).join(',');
            } else {
                return '';
            }
        },
        getStatusName(status) {
            if (status) {
                return this.statusList.filter(x => x.value == status)[0].text;
            }
            return '';
        },
        moreClick(name) {
            if (name === 'feeInfo') {
                let financeAuth = true;
                if (this.data.createdBy === this.$utils.getUserInfo().id) {
                    financeAuth = true;
                }
                this.$router.push({
                    path: '/platformApp/fee-info',
                    query: {
                        businessKey: this.data.orderNum,
                        businessType: '1',
                        bustype: this.data.businessType,
                        financeAuth
                    }
                });
            }
            if(name === 'release'){

                this.$router.push({
                    path: '/platformApp/TransOrder',
                    query: {
                        orderNo: this.data.orderNum
                    }
                });

            }
               if(name === 'seeedit'){
                    // this.readItem();
                if (this.data.orderSource==1 && this.data.orderStatus==0 ) {
                    //客户
                    this.editItem()
                }
                if (this.data.orderSource==1 && this.data.orderStatus ==2 ) {
                    //客户
                    this.editItem()
                }
                //平台
                if(this.data.orderSource==0) {
                    this.readItem();
                }
            }
        },
         editItem() {
               this.$router.push({ path: '/platformApp/order-add',
                query: {
                    label: `订单${this.data.orderNum}`,
                    key: this.data.orderNum,
                    disabled: false,
                    showBtn: true,
                    businessType: this.data.businessType,
                    ViewandEdit:true,
                    saveshow:true


                    }})
        },
        readItem() {
           this.$router.push({ path: '/platformApp/order-add',
                query: {
                    label: `订单${this.data.orderNum}`,
                    key: this.data.orderNum,
                    disabled: true,
                    showBtn: false,
                    businessType: this.data.businessType,
                    ViewandEdit:false,
                    saveshow:false
                    }})
        },
        getDataByPort(list, key) {
            if (list && list.length > 0) {
                let data = list.filter(x => x.category === key);
                if (data && data.length > 0) {
                    return data[0];
                }
            }
            return {weight: 0}
        },
        getDataByDate(list, key) {
            if (list && list.length > 0) {
                let data = list.filter(x => x.date === key);
                if (data && data.length > 0) {
                    console.log(data);
                    return data;
                }
            }
            return [];
        },
        drop(name) {
            this.$emit('on-drop', name, this.data);
        },
        containerCheckChange(status) {
            this.data.goodsList.forEach(x => {
                x.checked = status;
            });
            console.log(this.data.goodsList);
        }
    },
    watch: {
        'data.goodsList': {
            handler(val) {
                this.data.checked = !!(this.data.goodsList.filter(x => x.checked).length === this.data.goodsList.length && this.data.goodsList.filter(x => x.checked).length);
            },
            deep: true
        },
    }
};
</script>

<style lang="less">
.order-query {
    .ivu-tooltip-inner {
        background-color: rgba(70, 76, 91, 0.6)!important;
        font-weight: normal!important;
    }
    .ivu-tooltip-arrow {
        border-bottom-color: rgba(70, 76, 91, 0.6)!important;
    }
}
</style>
<style scoped lang="less">
.demo-spin-icon-load{
    animation: ani-demo-spin 1s linear infinite;
}
@keyframes ani-demo-spin {
    from { transform: rotate(0deg);}
    50%  { transform: rotate(180deg);}
    to   { transform: rotate(360deg);}
}
.flex-class {
    display: flex;
    align-items: center;
    justify-content: center;
}
.card-title {
    display: flex;
    width: 80%;
    text-align: center;
    height: 30px;
    p {
        border-right: 1px solid #d9d9d9;
        height: 30px;
        line-height: 30px;
        span {
            font-weight: normal;
        }
    }
    p:first-child {
        text-align: left;
    }
    p:first-child, p:last-child {
        border: none;
    }
}

.card-word {
    p {
        font-weight: 700;

        span {
            font-weight: 500;
        }
    }
}

.connecting-line {
    height: 2px;
    background-color: #4f68e8;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.circle-container {
    //display: flex;
    //justify-content: space-between;
    color: #4d66e2;
    font-size: 15px;
    .left-circle, .right-circle {
        display: flex;
        align-items: center;
        justify-content: space-around;
        padding-left: 30px;
    }
    .right-circle {
        padding-right: 60px;
    }
    .left-circle-container {
        width: 90%;
    }
    .right-circle-container {
        width: 66%;
    }

    .circle-title {
        overflow-wrap: break-word;
        color: rgba(0, 0, 0, 0.45);
        font-size: 12px;
        text-align: center;
        position: absolute;
        width: 100%;

        span {
            font-weight: 700;
            color: rgba(0, 0, 0, 0.85);
            font-size: 18px;
        }
    }
}
@keyframes arrowChange {
    100% {
        transform: rotate(180deg);
    }
}
@keyframes arrowChange2 {
    100% {
        transform: rotate(0);
    }
}
.speedOfProgress {
    cursor: pointer;
}
.top-arrow {
    animation: arrowChange .5s;
    animation-fill-mode: forwards;
    transform: rotate(0);
}
.bottom-arrow {
    animation: arrowChange2 .5s;
    animation-fill-mode: forwards;
    transform: rotate(180deg);
}
.order-status {
    display: inline-block;
    width: 100px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    margin-left: 20px;
    border-radius: 3px;
    background-color: #cfd2d8;
    color: #3e4c64;
}
.order-status0 {
    background-color: #cfd2d8;
    color: #3e4c64;
}
.order-status1 {
    background-color: #f68f42;
    color: #3e4c64;
}
.order-status2 {
    background-color: #f5c0c0;
    color: #d60404;
}
.order-status3 {
    background-color: #c4cdf4;
    color: #4f68e8;
}
.order-status4 {
    background-color: #c8e8d8;
    color: #28a569;
}
.order-status5 {
    background-color: #f5c0c0;
    color: #d60404;
}
.order-status6 {
    background-color: #f5c0c0;
    color: #d60404;
}
.order-status7 {
    background-color: #c8e8d8;
    color: #28a569;
}

.broken-line {
    width: 100%;
    height: 60px;
    border-left: 2px solid #4f68e8;
    margin-left: 29px;
    position: relative;

    .title {
        position: absolute;
        right: 100%;
        bottom: 0;
        padding-right: 10px;
        word-break: keep-all;

        p {
            overflow-wrap: break-word;
            color: rgba(0, 0, 0, 0.45);
            font-size: 12px;
            white-space: nowrap;
        }
        span {
            color: rgba(0, 0, 0, 0.85);
        }
    }
}

.broken-line-btn {
    padding-left: 5px;
    cursor: pointer;
    width: 60px;
    height: 24px;
    border-radius: 12px;
    border: 1px solid rgba(79, 104, 232, 1);
    overflow-wrap: break-word;
    color: rgba(79, 104, 232, 1);
    font-size: 12px;
    white-space: nowrap;
    text-align: center;
    line-height: 24px;
}

.business-progress {
    height: 100%;
    border-radius: 4px;
    background-color: rgba(244, 247, 250, 1);
    padding: 20px;

    overflow-wrap: break-word;
    color: rgba(0, 0, 0, 0.45);
    font-size: 12px;
    white-space: nowrap;
}

.font-weight-bold {
    font-weight: 700;
    color: rgba(0, 0, 0, 0.85);
}

.overdue {
    width: 92px;
    height: 32px;
    background-color: rgb(9,121,80);
    border-bottom-left-radius: 50px;
    position: absolute;
    right: 0;
    top: 0;
    color: #fff;
    text-align: center;
    line-height: 32px;
}
</style>
